angular.module('myApp', [])

.directive('bookList',function(){
    return{
        restrict:'ECAM',
        controller:function($scope,$element,$attrs){
            //这里后执行  2
            console.log($scope);
            //该$scope就是firstController的$scope
            //这里的controller会暴露一个API，利用这个API可以在多个指令之间通过依赖注入进行通信
            $scope.books =[
                {
                    name : 'php'
                },
                {
                    name : 'javascript'
                },
                {
                    name : 'java'
                }
            ]
            this.addBook = function () {
            //    添加一本书等等
                $scope.$apply(function () {
                    $scope.books.push({name:'angularjs'});
                })

            }
        },
        controllerAs: 'bookListController',
        template:'<div><ul><li ng-repeat="book in books">{{book.name}}</li></ul><book-add></book-add></div>',
        replace:true

    }
})
    .directive('bookAdd',function () {
        return {
            restrict : 'ECAM',
            template: '<button type="button">添加</button>',
            require: '^bookList',
            replace : true,
            link: function (scope,iElement,iAttrs,bookListController) {
                iElement.on('click', bookListController.addBook)
            }
        }
    })
//controller会传入$scope，$scope是连接controller、view、model
//controller主要是控制一些业务逻辑的，
// 比如说要绑定一些事件，设定$scope里面的一些参数
.controller('firstController',[
    '$scope',function ($scope) {
        //这里先执行  1
        // console.log('firstController');
        console.log($scope);

    }
])